<template>
	<view class="mask">
		<view class="mask__main">
			<view class="main__title">{{$t("ipo.buyTitle")}}</view>
			<view class="main__list">
				<view class="list__item">
					<text class="item__text">{{$t("ipo.name")}}</text>
					<text class="item__text">{{info.name}}</text>
				</view>
				<view class="list__item">
					<text class="item__text">{{$t("ipo.price")}}</text>
					<text class="item__text">{{info.shijia}}</text>
				</view>
				<view class="list__item">
					<text class="item__text">{{$t("ipo.nums")}}</text>
					<text class="item__text">{{buyNum}}</text>
				</view>
				<view class="list__item">
					<text class="item__text">{{$t("ipo.amount")}}</text>
					<text class="item__text">{{buyPrice}}</text>
				</view>
				<view class="list__item">
					<text class="item__text">{{$t("ipo.freeze")}}</text>
					<text class="item__text">{{buyPrice}}</text>
				</view>
			</view>
			<view class="main__btn">
				<text class="btn__text" @click.stop="cancleClick">{{$t("uni.showModal.cancel")}}</text>
				<text class="btn__text" @click.stop="enterClick">{{$t("uni.showModal.confirm")}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			isShowEnter:{
				type:Boolean,
				default:false
			},
			info:{
				type:Object,
				default:()=>({})
			},
			buyNum:{
				type:Number,
				default:1
			},
			buyPrice:{
				type:[Number,String],
				default:0
			}
		},
		methods:{
			cancleClick(){
				this.$emit("update:isShowEnter", false)
				uni.switchTab({
					url:`/pages/ipo/ipo`
				})
			},
			// 认购点击
			async enterClick(){
				uni.showLoading({
					title:this.$t('loading.loading'),
					mask:true
				})
				let {id} = this.info
				let params = {
					id,
					shuliang: this.buyNum
				}
				let res = await this.$api.ipoBuy(params)
				uni.hideLoading()
				if(res.code === 1){
					uni.showToast({
						title:this.$t('trade.done'),
						 icon:"success"
					})
					this.cancleClick()
				}else{
					uni.showToast({
						title:res.msg,
						 icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mask{
		@include fixedFullScreen(999);
		@include flexCenter(column);
		.mask__main{
			width: 680rpx;
			background: #1D1F2E;
			border-radius: 20rpx;
			padding: 40rpx 40rpx;
			box-sizing: border-box;
			.main__title{
				text-align: center;
				font-size: 42rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
			.main__list{
				margin-top: 40rpx;
				.list__item{
					@include flexRowAlign(space-between);
					height: 72rpx;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
			.main__btn{
				margin-top: 40rpx;
				@include flexRowAlign(space-between);
				.btn__text{
					width: 254rpx;
					height: 88rpx;
					background: #161827;
					border-radius: 8rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
					@include flexCenter();
					&:last-child{
						background: #458EF4;
					}
				}
			}
		}
	}
</style>